<!--富文本编辑器-->
<template>
  <div class="edit_container">
    <!--  新增时输入 -->
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      :style="{height:'340px'}"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @input="onEditorInput($event)"
      @change="onEditorChange($event)">
    </quill-editor>
  </div>
</template>
<script>
  import { quillEditor } from "vue-quill-editor";
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  export default {
    props:['richtext'],
    components: {
      quillEditor
    },
    data() {
      return {
        content:this.richtext ? this.richtext : '' ,
        str: '',
        editorOption:{
          modules:{
            toolbar:[
              ['bold'],
              [{ 'color': [] }]
            ]
          }
        }
      }
    },
    watch:{
      richtext(val){
        this.content = val;
      }
    },
    methods: {
      onEditorBlur(){
      }, // 失去焦点事件
      onEditorFocus(){
      }, // 获得焦点事件
      onEditorChange(){
      },
      onEditorInput(){
        this.$emit('inputQuill',this.content);//select事件触发后，自动触发showCityName事件
      },
      // 转码
      escapeStringHTML(str) {
        str = str.replace(/</g,'<');
        str = str.replace(/>/g,'>');
        return str;
      },
      publishArticle(){},
      previewArticle(){},
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    },
    mounted() {
      this.$emit('inputQuill',this.content);
    }
  }
</script>

<style>
  .ql-editor{
    font-size: 16px;
    line-height: 28px;
  }
  .ql-snow .ql-editor a{
    text-decoration: none;
    color: #2696ff;
    font-weight: 600;
  }
</style>
